<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <style>
      .div {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <script>
      var all = document.createElement("div");
      document.body.appendChild(all);
      all.id = "kuang";
      kuang.style.width = "300px";
      kuang.style.height = "500px";
      kuang.style.margin = "10px";
      kuang.style.border = "1px solid #FF9933";

      var header = document.createElement("div");
      //   body.appendChild(header);
      all.appendChild(header);
      header.id = header;
      header.style.width = "300px";
      header.style.height = "30px";
      header.style.backgroundColor = "#FF9933";
      header.style.lineHeight = "30px";
      header.style.color = "#ffffff";
      header.style.textAlign = "center";
      header.innerHTML = "存款收益计算器";
      var input1 = document.createElement("input");
      all.appendChild(input1);
      input1.id = "benjin";
      input1.placeholder = "存款本金";
      benjin.style.width = "270px";
      benjin.style.height = "35px";
      benjin.style.border = "1px solid #FF9933";
      benjin.style.marginLeft = "15px";
      benjin.style.marginTop = "15px";
      //
      var input2 = document.createElement("input");
      all.appendChild(input2);
      input2.id = "lixi";
      input2.placeholder = "存款利息";
      lixi.style.width = "270px";
      lixi.style.height = "35px";
      lixi.style.border = "1px solid #FF9933";
      lixi.style.marginLeft = "15px";
      lixi.style.marginTop = "15px";
      //
      var input3 = document.createElement("input");
      all.appendChild(input3);
      input3.id = "qishu";
      input3.placeholder = "存款期数";
      qishu.style.width = "270px";
      qishu.style.height = "35px";
      qishu.style.border = "1px solid #FF9933";
      qishu.style.marginLeft = "15px";
      qishu.style.marginTop = "15px";
      //
      var button = document.createElement("div");
      all.appendChild(button);
      button.id = "jisuan";
      jisuan.innerHTML = "计算";
      jisuan.style.color = "#ffffff";
      jisuan.style.textAlign = "center";
      jisuan.style.lineHeight = "35px";
      jisuan.style.width = "270px";
      jisuan.style.height = "35px";
      jisuan.style.backgroundColor = "#FF9933";
      jisuan.style.border = "1px solid #FF9933";
      jisuan.style.marginLeft = "15px";
      jisuan.style.marginTop = "15px";
      //
      var end = document.createElement("p");
      all.appendChild(end);
      end.id = "jieguo";
      jieguo.style.textAlign = "center";

      //
      button.setAttribute("onclick", "num()");
      function num() {
        end.innerHTML =
          Number(input1.value) + Number(input2.value) * Number(input3.value)+'元';
      }
    </script>
    <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
  </body>
</html>
